﻿<common:LayoutAwarePage x:Class="InfoHub.AppHub_Classic"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
                        xmlns:common="using:InfoHub.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:helpers="using:InfoHub.Helpers"
                        xmlns:local="using:InfoHub"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        x:Name="pageRoot"
                        mc:Ignorable="d">

    <common:LayoutAwarePage.DataContext>
        <local:AppHubViewModel />
    </common:LayoutAwarePage.DataContext>

    <common:LayoutAwarePage.Resources>

        <helpers:SnapConverter x:Key="SnapConverter" />

        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

        <CollectionViewSource x:Name="cvs"
                              IsSourceGrouped="True"
                              ItemsPath="Articles"
                              Source="{Binding Feeds}"
                              d:Source="{Binding Feeds,
                                                 Source={d:DesignInstance IsDesignTimeCreatable=True,
                                                                          Type=local:AppHubViewModel}}" />
        <CollectionViewSource x:Name="cvsSnap"
                              IsSourceGrouped="True"
                              ItemsPath="Feeds.Articles"
                              Source="{Binding Feeds}"
                              d:Source="{Binding Feeds,
                                                 Source={d:DesignInstance IsDesignTimeCreatable=True,
                                                                          Type=local:AppHubViewModel}}" />

        <DataTemplate x:Name="AdvertTemplateNormal">
            <Grid Background="Black">
                <Image Source="ms-appx:///Assets/AltAdvert.jpg" Stretch="UniformToFill" />
                <UI:AdControl Width="248" Height="248" />
            </Grid>
        </DataTemplate>

    </common:LayoutAwarePage.Resources>
    <!--<common:LayoutAwarePage.BottomAppBar>
        <AppBar IsOpen="True" x:Name="MyBottomAppBar">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal" />
                <StackPanel Grid.Column="1"
                            HorizontalAlignment="Right"
                            Orientation="Horizontal">
                    <Button x:Name="MyPurchaseButton"
                            AutomationProperties.Name="Upgrade"
                            Command="{Binding PurchaseHideAdsCommand,
                                              Mode=OneWay}"
                            Content="" Visibility="Collapsed"
                            Style="{StaticResource AppBarButtonStyle}" />
                    <Button Command="{Binding ReloadAllCommand, Mode=OneWay}" Style="{StaticResource RefreshAppBarButtonStyle}" />
                </StackPanel>
            </Grid>
        </AppBar>
    </common:LayoutAwarePage.BottomAppBar>-->

    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="Assets/Background.jpg" />
        </Grid.Background>

        <!--  this is what is shown during snap view  -->
        <Grid x:Name="SnapView"
              Background="{StaticResource PrimaryBrush}"
              Visibility="Collapsed">
            <helpers:SnapListView Width="320"
                                  Margin="6,0,-0,0"
                                  HorizontalAlignment="Right"
                                  VerticalAlignment="Top"
                                  IsItemClickEnabled="True"
                                  IsSynchronizedWithCurrentItem="False"
                                  ItemClick="ListView_ItemClick_1"
                                  ItemTemplate="{StaticResource SnapTemplate}"
                                  ItemsSource="{Binding Source={StaticResource cvs}}"
                                  ScrollViewer.VerticalScrollBarVisibility="Visible">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <StackPanel />
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" Visibility="{Binding Converter={StaticResource SnapConverter}}">
                                    <Button MinHeight="40"
                                            Margin="2,0,0,0"
                                            Command="{Binding DataContext.LoadFeedCommand,
                                                              ElementName=pageRoot,
                                                              Mode=OneWay}"
                                            CommandParameter="{Binding Feed.MoreUrl}"
                                            Content="{Binding Feed.Title}"
                                            FontSize="35"
                                            Foreground="{StaticResource PrimaryContrastBrush}"
                                            Style="{StaticResource TextButtonStyle}" />
                                    <ProgressRing Width="50"
                                                  Height="50"
                                                  Margin="20,0,0,0"
                                                  IsActive="True"
                                                  Visibility="{Binding Feed.Busy,
                                                                       Converter={StaticResource BooleanToVisibilityConverter}}" />
                                </StackPanel>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </ListView.GroupStyle>
            </helpers:SnapListView>
        </Grid>

        <!--  this is what is shown during normal view  -->
        <Grid x:Name="FillView"
              Background="Transparent"
              Visibility="Visible">

            <Grid.RowDefinitions>
                <RowDefinition Height="140" />
                <RowDefinition />
            </Grid.RowDefinitions>

            <!--  pixel layout test  -->
            <!--
                <Rectangle Width="120" Height="100" Fill="White" VerticalAlignment="Top" HorizontalAlignment="Left" Opacity=".5"></Rectangle>
                <Rectangle Width="390" Height="100" Fill="White" VerticalAlignment="Top" HorizontalAlignment="Left" Opacity=".5"></Rectangle>
                <Rectangle Width="120" Height="140" Fill="White" VerticalAlignment="Top" HorizontalAlignment="Left" Opacity=".5"></Rectangle>
                <Rectangle Width="120" Height="390" Fill="White" VerticalAlignment="Top" HorizontalAlignment="Left" Opacity=".5" Grid.RowSpan="2"></Rectangle>
            -->

            <StackPanel Margin="120,58,0,0"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Orientation="Horizontal">
                <TextBlock FontSize="42"
                           FontWeight="Bold"
                           Foreground="{StaticResource TitleBrush}"
                           Style="{StaticResource PageHeaderTextStyle}"
                           Text="{Binding DataContext.Title,
                                          ElementName=pageRoot}">
                </TextBlock>
                <TextBlock Margin="-20,0,30,40"
                           FontSize="20"
                           Foreground="{StaticResource TitleBrush}"
                           Style="{StaticResource PageHeaderTextStyle}"
                           Text="{Binding DataContext.SubTitle,
                                          ElementName=pageRoot}">
                </TextBlock>
            </StackPanel>

            <SemanticZoom Grid.Row="0"
                          Grid.RowSpan="2"
                          Margin="0,130,0,0">
                <SemanticZoom.ZoomedInView>

                    <!--  this is what is whoen while zoomed in  -->
                    <helpers:GridView x:Name="HubGridView"
                                      FontFamily="Global User Interface"
                                      IsItemClickEnabled="True"
                                      IsSynchronizedWithCurrentItem="False"
                                      ItemClick="HubGridView_ItemClick_1"
                                      ItemsSource="{Binding Source={StaticResource cvs}}"
                                      Padding="115,0,80,-10"
                                      SelectedItem="{Binding SelectedArticle,
                                                             Mode=TwoWay}"
                                      SelectionMode="Single">
                        <GridView.Header>
                            <ContentControl Height="489"
                                            Margin="0,45,80,0"
                                            Content="{Binding SummaryData}"
                                            ContentTemplate="{StaticResource SummaryTemplateHero}"
                                            Tapped="ContentControl_Tapped_1"
                                            Visibility="{Binding SummaryVisibility}" />
                        </GridView.Header>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Margin="0,0,80,0" Orientation="Horizontal" >
                                    <StackPanel.ChildrenTransitions>
                                        <TransitionCollection>
                                            <EntranceThemeTransition/>
                                        </TransitionCollection>
                                    </StackPanel.ChildrenTransitions>
                                </StackPanel>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemTemplateSelector>
                            <helpers:TemplateSelector AdvertTemplateHero="{StaticResource AdvertTemplateNormal}"
                                                      AdvertTemplateNormal="{StaticResource AdvertTemplateNormal}"
                                                      CalendarTemplateHero="{StaticResource CalendarTemplateNormal}"
                                                      CalendarTemplateNormal="{StaticResource CalendarTemplateNormal}"
                                                      FlickrTemplateHero="{StaticResource FlickrTemplateHero}"
                                                      FlickrTemplateNormal="{StaticResource FlickrTemplateNormal}"
                                                      NewsTemplateHero="{StaticResource NewsTemplateHero}"
                                                      NewsTemplateNormal="{StaticResource NewsTemplateNormal}"
                                                      SummaryTemplateHero="{StaticResource SummaryTemplateHero}"
                                                      SummaryTemplateNormal="{StaticResource SummaryTemplateHero}"
                                                      TwitterTemplateHero="{StaticResource TwitterTemplateNormal}"
                                                      TwitterTemplateNormal="{StaticResource TwitterTemplateNormal}"
                                                      WeatherTemplateHero="{StaticResource WeatherTemplateNormal}"
                                                      WeatherTemplateNormal="{StaticResource WeatherTemplateNormal}"
                                                      YouTubeTemplateHero="{StaticResource YouTubeTemplateHero}"
                                                      YouTubeTemplateNormal="{StaticResource YouTubeTemplateNormal}" />
                        </GridView.ItemTemplateSelector>
                        <GridView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal">
                                            <Button MinHeight="40"
                                                    Margin="3,0,0,0"
                                                    Command="{Binding DataContext.LoadFeedCommand,
                                                                      ElementName=pageRoot,
                                                                      Mode=OneWay}"
                                                    CommandParameter="{Binding Feed.MoreUrl}"
                                                    FontSize="20"
                                                    Foreground="{StaticResource GroupHeaderBrush}"
                                                    Style="{StaticResource TextButtonStyle}">
                                                <Button.Content>
                                                    <TextBlock>
                                                        <Run Text="{Binding Feed.Title}">
                                                        </Run>
                                                        <Run Text="&gt;">
                                                        </Run>
                                                    </TextBlock>
                                                </Button.Content>
                                            </Button>
                                            <ProgressRing Width="30"
                                                          Height="30"
                                                          Margin="20,0,0,0"
                                                          Foreground="{StaticResource GroupHeaderBrush}"
                                                          IsActive="True"
                                                          Visibility="{Binding Feed.Busy,
                                                                               Converter={StaticResource BooleanToVisibilityConverter}}" />
                                        </StackPanel>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                                <GroupStyle.Panel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid MinWidth="300"
                                                               Margin="0,0,80,80"
                                                               ItemHeight="1"
                                                               ItemWidth="1"
                                                               MaximumRowsOrColumns="500">
                                            <VariableSizedWrapGrid.ChildrenTransitions>
                                                <TransitionCollection>
                                                    <EntranceThemeTransition/>
                                                </TransitionCollection>
                                            </VariableSizedWrapGrid.ChildrenTransitions>
                                        </VariableSizedWrapGrid>
                                    </ItemsPanelTemplate>
                                </GroupStyle.Panel>
                            </GroupStyle>
                        </GridView.GroupStyle>
                    </helpers:GridView>

                </SemanticZoom.ZoomedInView>
                <SemanticZoom.ZoomedOutView>

                    <!--  this is what is whoen while zoomed out (high level)  -->
                    <GridView x:Name="GridViewOut"
                              Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              ItemsSource="{Binding Feeds}"
                              SelectionMode="None">
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid MaximumRowsOrColumns="4" Orientation="Vertical" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid Width="400" Background="{StaticResource SecondaryBrush}">
                                    <ProgressRing Width="50"
                                                  Height="50"
                                                  Margin="0,0,20,0"
                                                  HorizontalAlignment="Right"
                                                  Foreground="{StaticResource SecondaryContrastBrush}"
                                                  IsActive="True"
                                                  Visibility="{Binding Group.Feed.Busy,
                                                                       Converter={StaticResource BooleanToVisibilityConverter}}" />
                                    <!--  this is required to see the text at designtime  -->
                                    <TextBlock Margin="10"
                                               FontSize="40"
                                               Text="{Binding Header}" />
                                    <!--  this is required to see the text at runtime  -->
                                    <TextBlock Margin="10"
                                               FontSize="40"
                                               Foreground="{StaticResource SecondaryContrastBrush}"
                                               Text="{Binding Group.Header}" />
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                    </GridView>

                </SemanticZoom.ZoomedOutView>
            </SemanticZoom>

            <common:Browser x:Name="MyBrowser" Grid.RowSpan="2" />

        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!--  Visual states reflect the application's view state  -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FillView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyBottomAppBar" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>-->
                    </Storyboard>
                </VisualState>

                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FillView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyBottomAppBar" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>-->
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    </Grid>
</common:LayoutAwarePage>
